<template>
  <div class="core-functions">
    <div class="functions-header">
      <h3>核心功能管理</h3>
    </div>
    
    <div class="functions-grid">
      <a-row :gutter="[16, 16]">
        <!-- 第一行：4个卡片 -->
        <!-- 数据存储管理 -->
        <a-col :span="6">
          <div class="function-card" @click="handleDataStorage">
            <div class="card-header">
              <div class="card-icon">
                <DatabaseOutlined />
              </div>
              <div class="card-title">数据存储配置</div>
            </div>
            <div class="card-description">
              配置结构化、半结构化和非结构化数据存储，支持国产化数据库和网络文件系统
            </div>
            <div class="card-action">
              <a-button type="primary" size="small">配置存储</a-button>
            </div>
          </div>
        </a-col>
        
        <!-- 全局数据检索 -->
        <a-col :span="6">
          <div class="function-card" @click="handleGlobalSearch">
            <div class="card-header">
              <div class="card-icon search">
                <SearchOutlined />
              </div>
              <div class="card-title">全局数据检索</div>
            </div>
            <div class="card-description">
              快速检索全局数据，支持多维度查询，提供高效的数据查找和分析能力
            </div>
            <div class="card-action">
              <a-button type="primary" size="small">全局检索</a-button>
            </div>
          </div>
        </a-col>
        
        <!-- 备份与恢复 -->
        <a-col :span="6">
          <div class="function-card" @click="handleBackupRestore">
            <div class="card-header">
              <div class="card-icon backup">
                <CloudSyncOutlined />
              </div>
              <div class="card-title">备份与恢复</div>
            </div>
            <div class="card-description">
              自动备份重要数据，支持增量备份，提供快速恢复机制，保障数据安全
            </div>
            <div class="card-action">
              <a-button type="primary" size="small">备份恢复</a-button>
            </div>
          </div>
        </a-col>
        
        <!-- 性能监控 -->
        <a-col :span="6">
          <div class="function-card" @click="handlePerformanceMonitor">
            <div class="card-header">
              <div class="card-icon monitor">
                <LineChartOutlined />
              </div>
              <div class="card-title">性能监控</div>
            </div>
            <div class="card-description">
              监控存储运行性能，在容量和性能不足时进行告警与动态
            </div>
            <div class="card-action">
              <a-button type="primary" size="small">创建数据</a-button>
            </div>
          </div>
        </a-col>
      </a-row>
      
      <a-row :gutter="[16, 16]" style="margin-top: 16px;">
        <!-- 第二行：3个卡片 -->
        <!-- 无人机数据管理 -->
        <a-col :span="6">
          <div class="function-card" @click="handleDroneData">
            <div class="card-header">
              <div class="card-icon drone">
                <RocketOutlined />
              </div>
              <div class="card-title">无人机数据管理</div>
            </div>
            <div class="card-description">
              无人机标签数据统一分类存储
            </div>
            <div class="card-action">
              <a-button type="primary" size="small">无人数据</a-button>
            </div>
          </div>
        </a-col>
        
        <!-- 操作日志 -->
        <a-col :span="6">
          <div class="function-card" @click="handleTaskLogs">
            <div class="card-header">
              <div class="card-icon logs">
                <FileTextOutlined />
              </div>
              <div class="card-title">操作日志</div>
            </div>
            <div class="card-description">
              以日志形式记录所有数据存储相关的操作，支持日志查看与管理
            </div>
            <div class="card-action">
              <a-button type="primary" size="small">查看日志</a-button>
            </div>
          </div>
        </a-col>

        <!-- 存储任务调度 -->
        <a-col :span="6">
          <div class="function-card" @click="handleStorageTask">
            <div class="card-header">
              <div class="card-icon task">
                <CheckCircleOutlined />
              </div>
              <div class="card-title">存储任务调度</div>
            </div>
            <div class="card-description">
              图形化数据存储任务统一调度配置界面
            </div>
            <div class="card-action">
              <a-button type="primary" size="small">存储调度</a-button>
            </div>
          </div>
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script setup>
import { 
  DatabaseOutlined,
  SearchOutlined,
  CloudSyncOutlined,
  LineChartOutlined,
  RocketOutlined,
  FileTextOutlined,
  CheckCircleOutlined
} from '@ant-design/icons-vue'
import { message } from 'ant-design-vue'
import { useRouter, useRoute } from 'vue-router'

const router = useRouter()  

// 功能处理函数
const handleDataStorage = () => {
  message.info('跳转到数据存储管理页面')
  router.push({ name: 'storage-config' })
}

const handleGlobalSearch = () => {
  message.info('跳转到全局数据检索页面')
}

const handleBackupRestore = () => {
  message.info('跳转到备份与恢复页面')
}

const handlePerformanceMonitor = () => {
  message.info('跳转到性能监控页面')
}

const handleDroneData = () => {
  message.info('跳转到无人机数据管理页面')
}

const handleTaskLogs = () => {
  message.info('跳转到任务日志页面')
}

const handleStorageTask = () => {
  message.info('跳转到存储任务判断页面')
}
</script>

<style scoped>
.core-functions {
  padding: 0;
  margin-bottom: 30px;
  padding-left: 1em;
  padding-right: 1em;
}

.functions-header {
  margin-left: 1em;
  margin-bottom:1em;
  opacity: 1;
  color: #FFFFFF;
  font-family: Source Han Sans;
  font-weight: bold;
  font-size: 18px;
  line-height: 22px;
  letter-spacing: 0px;
  text-align: left;
}

.functions-header h3 {
  color: #ffffff;
  font-size: 20px;
  font-weight: 600;
  margin: 0;
  font-family: 'Source Han Sans', sans-serif;
}

.section-title {
  color: #ffffff;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.functions-grid {
  width: 100%;
  margin-bottom: 20px;
}

.function-card {
  background: #FFFFFF07;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 20px;
  transition: all 0.3s ease;
  cursor: pointer;
  height: 180px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.function-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #00CFFD, #33D9FF);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.function-card:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(0, 207, 253, 0.5);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0, 207, 253, 0.15);
}

.function-card:hover::before {
  opacity: 1;
}

.card-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

.card-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  font-size: 18px;
  color: #00CFFD;
  background: #00CFFD33;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.card-icon.search,
.card-icon.backup,
.card-icon.monitor,
.card-icon.drone,
.card-icon.logs,
.card-icon.task {
  background: #00CFFD33;
  color: #00CFFD;
}

.function-card:hover .card-icon {
  transform: scale(1.1);
}

.card-title {
  color: #E0E6ED;
  font-size: 16px;
  font-weight: 600;
  flex: 1;
}

.card-description {
  color: #A0AEC0;
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 20px;
}

.card-action {
  display: flex;
  justify-content: flex-start;
}

.card-action .ant-btn {
  background: #00CFFD;
  border-color: #00CFFD;
  color: #ffffff;
  border-radius: 4px;
  font-weight: 500;
  font-size: 12px;
  height: 28px;
  padding: 0 12px;
  transition: all 0.3s ease;
}

.card-action .ant-btn:hover {
  background: #33D9FF;
  border-color: #33D9FF;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 207, 253, 0.3);
}
</style>